<template>
  <el-container>
    <Aside :asideWidth="asideWidth" :isCollapse="isCollapse" />
    <div style="width: 100%; flex-wrap: wrap">
      <Header :collapseIcon="collapseIcon" :handleCollapse="handleCollapse" />
      <el-main>
        <router-view />
        <!-- 表示当前页面的子路由会在<router-view />里面展示      -->
      </el-main>
    </div>
  </el-container>
</template>

<script>
import Aside from "./Aside.vue";
import Header from "./Header.vue";
export default {
  components: {
    Aside,
    Header,
  },
  data() {
    return {
      isCollapse: false,
      asideWidth: "200px",
      collapseIcon: "el-icon-s-fold",
      showHome: false,
    };
  },
  methods: {
    handleCollapse() {
      this.isCollapse = !this.isCollapse;
      if (this.isCollapse) {
        this.asideWidth = "64px";
        this.collapseIcon = "el-icon-s-unfold";
      } else {
        this.asideWidth = "200px";
        this.collapseIcon = "el-icon-s-fold";
      }
    },
  },
};
</script>
<style></style>
